<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${title}"></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" media="all" />
    <link rel="stylesheet" type="text/css", href="./lib/layui-v2.5.5/css/layui.css" />
</head>

<body class="home blog custom-background round-avatars">
<div class="Yarn_Background" style="background-image: url(./images/47fb3c_.jpg);"></div>

<div class="navi" data-aos="fade-down">
    <div class="bt-nav">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
    </div>
    <div class="navbar animated fadeInRight">
        <div class="inner">
            <nav id="site-navigation" class="main-navigation">
                <div id="main-menu" class="main-menu-container">
                    <div class="menu-menu-container">
                        <ul id="primary-menu" class="menu">
                            <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-17">
                                <a href="/">首页</a>
                            </li>
<!--                            <li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173">-->
<!--                                <a href="/category">分类</a>-->
<!--                            </li>-->
                            <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78">
                                <a href="/archives">归档</a>
                            </li>
                            <li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-252">
                                <a href="/about">关于</a>
                            </li>
                            <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57">
                                <a id="login" href="/login">登录</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- #site-navigation -->
        </div>
    </div>
</div>

<header id="masthead" class="overlay animated from-bottom" itemprop="brand">
    <div class="site-branding text-center">
        <a href="">
            <figure>
                <img class="custom-logo avatar" src="./images/omikron.png" />
            </figure>
        </a>
        <h3 class="blog-description"><p th:text="${title}"></p></h3>
    </div>
    <!-- .site-branding -->
    <div class="decor-part">
        <div id="particles-js"></div>
    </div>
    <div class="animation-header">
        <div class="decor-wrapper">
            <svg id="header-decor" class="decor bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
                <path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
                <path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
                <path class="medium left" d="M0 100 L50 50 L0 33.3" fill="rgba(255,255,255, .3)"></path>
                <path class="medium right" d="M100 100 L50 50 L100 33.3" fill="rgba(255,255,255, .3)"></path>
                <path class="small left" d="M0 100 L50 50 L0 66.6" fill="rgba(255,255,255, .5)"></path>
                <path class="small right" d="M100 100 L50 50 L100 66.6" fill="rgba(255,255,255, .5)"></path>
                <path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
                <path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
            </svg>
        </div>
    </div>
</header>

<div id="main" class="content">
    <div class="container">
        <article itemscope="itemscope">
            <div id="article" class="posts-list js-posts">
                <div class="post post-layout-list js-gallery" data-aos="fade-up"></div>
            </div>

            <div class="pagination js-pagination">
                <div class="js-next pagination__load">
<!--                    <a href=""><i class="iconfont">&#xe605;</i></a>-->
                    <div id="page"></div>
                </div>
            </div>

        </article>
    </div>
</div>

<footer id="footer" class="overlay animated from-top">
    <div class="decor-wrapper">
        <svg id="footer-decor" class="decor top" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
            <path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
            <path class="medium left" d="M0 0 L50 50 L0 66.6" fill="rgba(255,255,255, .3)"></path>
            <path class="medium right" d="M100 0 L50 50 L100 66.6" fill="rgba(255,255,255, .3)"></path>
            <path class="small left" d="M0 0 L50 50 L0 33.3" fill="rgba(255,255,255, .5)"></path>
            <path class="small right" d="M100 0 L50 50 L100 33.3" fill="rgba(255,255,255, .5)"></path>
            <path d="M0 0 L50 50 L100 0 L0 0" fill="rgba(255,255,255, 1)"></path>
            <path d="M48 48 L50 51 L52 48 L48 48" fill="rgba(255,255,255, 1)"></path>
        </svg>
    </div>
    <div class="socialize" data-aos="zoom-in">
        <li>
            <a title="weibo" class="socialicon" href=""><i class="iconfont" aria-hidden="true">&#xe601;</i></a>
        </li>
        <li>
            <a title="WeChat" class="socialicon" href=""><i class="iconfont" aria-hidden="true">&#xe609;</i></a>
        </li>
        <li>
            <a title="QQ" class="socialicon" href="" target="_blank"><i class="iconfont" aria-hidden="true">&#xe616;</i></a>
        </li>
    </div>
    <div class="cr">
        Copyright&copy;2020. Powered by
        <a href="https://mapletown.xyz">Oxygen</a>
    </div>

<!--    <script type="text/javascript"-->
<!--            src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">-->
<!--    </script>-->
    <script type='text/javascript' src='./js/jquery.min.js'></script>
    <script type='text/javascript' src='./js/plugins.js'></script>
    <script type='text/javascript' src='./js/script.js'></script>
    <script type='text/javascript' src='./js/particles.js'></script>
    <script type='text/javascript' src='./js/aos.js'></script>
    <script type="text/javascript" src="./lib/layui-v2.5.5/layui.js"></script>
    <script type="text/javascript" src="./js/util.js"></script>
    <script>

        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage,
                layer = layui.layer,
                $ = layui.$,
                count = 0,
                userInfo = getCookie('user');

            if(userInfo) {
                $("#login").text("我的账户");
                $("#login").attr('href', '/admin');
            } else {
                $("#login").text("登录");
                $("#login").attr('href', '/login');
            }

            var article = ['<div class="post post-layout-list" data-aos="fade-up">' +
            '<div class="status_list_item icon_kyubo">' +
            '<div class="status_user" ' +
            'style="background-image: url(./images/b0ce3f3cde0c084b6d42321b2dcbc407.jpeg);">' +
            '<div class="status_section">' +
            '<a href="/detail.html?cid={0}" target="_blank" class="status_btn">{1}</a>' +
            '<p class="section_p">{2}' +
            '</p></div></div></div></div>',

            '<div class="post post-layout-list" data-aos="fade-up"><div class="postnormal review ">' +
            '<div class="post-container review-item">' +
            '<div class="row review-item-wrapper">' +
            '<div class="col-sm-3"><a rel="nofollow" href="/detail.html?cid={0}">' +
            '<div class="review-item-img" ' +
            'style="background-image: url({1});"></div></a></div>' +
            '<div class="col-sm-9 flex-xs-middle">' +
            '<div class="review-item-title">' +
            '<a href="detail.html?cid={2}" target="_blank" rel="bookmark">{3}</a></div>' +
            '<div class="review-item-creator"><b>发布日期：</b>{4}</div>' +
            '<span class="review-item-info"><b>最后修改：</b>{5}</span></div></div>' +
            '<div class="review-bg-wrapper">' +
            '<div class="bg-blur" style="background-image: url({6});">' +
            '</div></div></div><div class="post-container">' +
            '<div class="entry-content">{7}</div>' +
            '<div class="post-footer"><a class="gaz-btn primary" target="_blank" href="/detail.html?cid={8}">READ MORE</a>' +
            '<span class="total-comments-on-post pull-right"><a target="_blank" href="/detail.html?cid={9}">{10} Comments</a>' +
            '</span></div></div></div></div>'];

            var pic = ['./images/diego-ph-249471-2-800x1000.jpg',
                './images/47fb3c_9afed6c259f94589881bd55376206366mv2_d_3840_5784_s_4_2-800x450.jpg'];

            var regex = /(<([^>]+)>)/ig;

            $.ajax({
                async: false,
                url: "/content/getPublicByPage",
                method: "GET",
                data: {"page": 1, "limit": 5},
                success: function (res) {
                    count = res.count;
                    var html = '';
                    var j = 0;
                    for(var i = 0; i < res.data.length; i++) {

                        var t = res.data[i];
                        var a;
                        if(j === 0)
                            a = article[j].format(t.cid, t.title,
                                t.text.replace(regex, "").slice(0,170)+'......');
                        else {
                            var index = Math.round(Math.random());
                            a = article[j].format(t.cid, pic[index], t.cid, t.title, t.created, t.modified,
                                pic[index], t.text.replace(regex, "").slice(0,180)+'......',
                                t.cid, t.cid, t.commentNum);
                        }
                        html += a;
                        j++;
                        if(j===2)
                            j = 0;
                    }
                    $("#article")[0].innerHTML = html;
                },
                error: function (res) {
                    console.error('发生错误:\n' + res);
                }
            });
            // console.log(count);
            laypage.render({
                elem: 'page',
                count: count,
                limit: 5,
                layout: ['prev', 'next'],
                jump: function(obj, first){
                    if(!first){
                        $.ajax({
                            url: "/content/getPublicByPage",
                            method: "GET",
                            data: {"page": obj.curr, "limit": obj.limit},
                            success: function (res) {
                                var html = '';
                                var j = 0;
                                for(var i = 0; i < res.data.length; i++) {

                                    var t = res.data[i];
                                    var a;
                                    if(j === 0)
                                        a = article[j].format(t.cid, t.title,
                                            t.text.replace(regex, "").slice(0,170)+'......');
                                    else {
                                        var index = Math.round(Math.random());
                                        a = article[j].format(t.cid, pic[index], t.cid, t.title, t.created, t.modified,
                                            pic[index], t.text.replace(regex, "").slice(0,180)+'......',
                                            t.cid, t.cid, t.commentNum);
                                    }
                                    html += a;
                                    j++;
                                    if(j===2)
                                        j = 0;
                                }
                                $("#article")[0].innerHTML = html;
                                document.body.scrollTop = document.documentElement.scrollTop = 0;
                            },
                            error: function (res) {

                            }
                        });
                    }
                }
            });

        });
    </script>
</footer>
</body>

</html>